<template>
	<view class="themeItem">

		<navigator :url="`/pages/classlist/classlist?id=` + item.id + '&name=' + item.name" class="box" v-if="!isMore">
			<image class="pic" :src="item.picurl" mode="aspectFill"></image>
			<view class="mask">{{item.name}}</view>
			<view class="tab">{{ compareTimestamp(item.updateTime) }}天更新</view>
		</navigator>

		<navigator url="/pages/category/category" open-type="reLaunch" class="box more" v-if="isMore">
			<image class="pic" src="/common/images/more.jpg" mode="aspectFill"></image>
			<view class="mask">
				<uni-icons type="bars" size="34" color="#fff"></uni-icons>
				<text class="text">更多</text>
			</view>
		</navigator>

	</view>
</template>

<script setup>
	import {
		fixMinioUrl
	} from "@/utils/img-url.js"
	import {
		compareTimestamp
	} from "@/utils/common.js"
	defineProps({
		isMore: {
			type: Boolean,
			default: false
		},
		item: {
			type: Object,
			default () {
				return {
					name: "默认名称",
					picurl: "/common/images/classify1.jpg",
					updateTime: Date.now() - 1000 * 60 * 60 * 5
				}
			}
		}
	})
</script>

<style lang="scss" scoped>
	.themeItem {

		.box {
			height: 340rpx;
			border-radius: 16rpx; // 更圆润
			overflow: hidden;
			position: relative;
			box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08); // 轻微阴影提升层次
			transition: transform 0.2s ease, box-shadow 0.2s ease;

			&:active {
				transform: scale(0.98); // 点击缩放反馈
			}

			.pic {
				width: 100%;
				height: 100%;
				object-fit: cover; // 图片裁剪更清晰
			}

			.mask {
				width: 100%;
				height: 70rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.35); // 稍加深，提升文字可读性
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				backdrop-filter: blur(10rpx); // 毛玻璃效果更自然
				font-weight: 600;
				font-size: 30rpx;
				text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3); // 文字加阴影，更清晰
			}

			.tab {
				position: absolute;
				left: 0;
				top: 0;
				background: linear-gradient(45deg, #fa815a, #ff6b52); // 渐变色更生动
				color: #fff;
				font-size: 22rpx;
				padding: 6rpx 14rpx;
				border-radius: 0 0 20rpx 0;
				font-weight: 500;
				box-shadow: 0 4rpx 8rpx rgba(250, 129, 90, 0.3);
				backdrop-filter: blur(6rpx); // 毛玻璃，融合背景
			}
		}

		// “更多”卡片优化
		.box.more {
			background-color: #f8f9fc;
			border: 2rpx dashed #ddd;
			display: flex;
			align-items: center;
			justify-content: center;

			.pic {
				position: absolute;
				width: 100%;
				height: 100%;
				opacity: 0.4; // 降低背景图透明度，突出图标
			}

			.mask {
				width: 100%;
				height: 100%;
				flex-direction: column;
				background: rgba(0, 0, 0, 0.4); // 增强遮罩，突出文字
				z-index: 1;
			}

			.text {
				font-size: 28rpx;
				margin-top: 16rpx;
				font-weight: 500;
			}
		}
	}
</style>